<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
    <style>
        .map {
            float: left;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="fun-menu">
        多地图联动:
        <button onclick="test1()">同步（默认同步第一个）</button>
        <button onclick="test2()">同步到第二个(以第二个地图的位置为准)</button>
        <button onclick="test3()">同步(1,3)</button>
        <button onclick="test4()">同步(1,4)(2,3)</button>
        <button onclick="clear1()">取消同步</button>
    </div>
    <div class="map" id="cesiumContainer1"></div>
    <div class="map" id="cesiumContainer2"></div>
    <div class="map" id="cesiumContainer3"></div>
    <div class="map" id="cesiumContainer4"></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        map1 = new cpc.Map({
            container: "cesiumContainer1",
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ],
        });
        map2 = new cpc.Map({
            container: "cesiumContainer2",
            baseMaps: [
                {
                    type: "TDTImageryLayer",
                    mold: "image",
                    tk: "7b435c61bff7f77eb49206e10d6397bd",
                },
            ],
        });
        map3 = new cpc.Map({
            container: "cesiumContainer3",
            baseMaps: [{ type: "AMapImageryLayer", mold: "digital", }],
        });
        map4 = new cpc.Map({
            container: "cesiumContainer4",
            baseMaps: [{ type: "SingleTileImageryLayer", url: "../images/maps/world.jpg" }],
        });


        var linkageMap = null;
        function clear1() {
            if (linkageMap) {
                linkageMap.cancelSync();
                linkageMap = null;
            }
        }
        function test1() {
            clear1();
            linkageMap = new cpc.LinkageMap([map1, map2, map3, map4]);
            linkageMap.sync();
        }
        function test2() {
            clear1();
            linkageMap = new cpc.LinkageMap([map1, map2, map3, map4]);
            //0为第一个；默认为0
            linkageMap.sync(1);
        }
        function test3() {
            clear1();
            linkageMap = new cpc.LinkageMap([map1, map3]);
            //0为第一个；默认为0
            linkageMap.sync();
        }

        function test4() {
            clear1();
            linkageMap = new cpc.LinkageMap([map1, map4]);
            //0为第一个；默认为0
            linkageMap.sync();
            linkageMap = new cpc.LinkageMap([map2, map3]);
            //0为第一个；默认为0
            linkageMap.sync();
        }
    </script>
</body>

</html>